<template>
  <div>
  <div class="page-login">

    <div class="loginform">
      <div class="title">登录窗口</div>
      <div class="line">
        <input v-model="loginData.username" placeholder="请输入用户名" />
      </div>
      <div class="line">
        <input v-model="loginData.password" placeholder="请输入密码" />
      </div>
      <div class="line code">
        <input v-model="loginData.code" placeholder="请输入验证码" />
        <a>验证码<img src="" /></a>
      </div>
      <div class="line checkbox ">
        <input type="checkbox" />下次自动登录
        <a href="#">忘记密码？</a>
      </div>
      <div class="line">
        <a @click="loginSubmit" class="btn-login">登录</a>
      </div>
      <div class="line desc">
        还没有账号，
        <a href="#">立即注册</a>
      </div>
    </div>
</div>
     <el-dialog title="提示" width="450px" :visible.sync="dialogMessage" style="text-align:center;">
       {{errormessage}}
       <br/>
       <br/>
        <el-button @click="dialogMessage = false" type="primary">确定</el-button>
    </el-dialog>
  </div>

</template>

<script>
import $ from "jquery";
export default {
  data() {
    return {
      dialogMessage:false,
      errormessage:"",
      dialogAddForm: {
        name: "",
        ip: "",
        desc:""
      },
      loginData: {
        username: "",
        password: "",
        code: ""
      }
    };
  },
  components: {},
 methods: {
    dialogAddSubmit(){
      if(this.dialogAddForm.name.length < 3 || this.dialogAddForm.name.length > 10 ){ 
        this.openerrormessage('长度不小于数字3字符或3个字母或3个中文字符， 最大不超10个中文字符');
        return;
      }
      let reg = /(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))/;
       if (!reg.test(this.dialogAddForm.ip)) {
        this.openerrormessage("只允许IPv4地址由4组数字组成，每组数字之间以.分隔，每组数字的取值范围是0~255");
        return false;
      }
       if(this.dialogAddForm.desc   > 30 ){
        this.openerrormessage('备注信息最大不超30个中文字符');
        return;
      }

    },
    openerrormessage(msg){
      this.errormessage = msg;
      this.dialogMessage = true;
    },
    loginSubmit() {

      if(!this.loginData.username){
        this.openerrormessage("用户名不能为空");
        return false;
      }
      var reg = /^(?!(\d+)$)[\u4e00-\u9fffa-zA-Z\d\-_]+$/;
      if (!reg.test(this.loginData.username)) {
        this.openerrormessage("用户名由中英文字符、下划线、数字组成，不能为纯数字");
        return false;
      }
      if(this.loginData.username.length < 3 || this.loginData.username.length > 10 ){
        this.openerrormessage("用户名长度不能少于3个字符（中文4个字符），最多10个字符");
        return false;
      }

      //密码必须包含数字和字母
      //密码长度8到16位
      var regex = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}/; 
      if (!regex.test(this.loginData.password)) {
        this.openerrormessage("密码必须包含数字和字母,密码长度8到16位");
        return false;
      }
      //密码必须包含特殊字符 _&#%
      if (
        !(
          this.loginData.password.indexOf("_") != -1 ||
          this.loginData.password.indexOf("&") != -1 ||
          this.loginData.password.indexOf("#") != -1 ||
          this.loginData.password.indexOf("%") != -1
        )
      ) {
        this.openerrormessage("密码必须包含特殊字符 _&#%");
        return false;
      }
      //不能连续字符（如123、abc）连续3位或3位以上
      if (!this.LxStr(this.loginData.password)) {
        this.openerrormessage("不能连续字符（如123、abc）连续3位或3位以上");
        return false;
      }
      //不能相同字符（如111、aaa）连续3位或3位以上
      var re = /(\w)*(\w)\2{2}(\w)*/g;
      if (re.test(this.loginData.password)) {
        this.openerrormessage("不能相同字符（如111、aaa）连续3位或3位以上");
        return false;
      }

      this.$router.push({ path: "/index" });
    },
    LxStr(str) {
      var arr = str.split("");
      var flag = true;
      for (var i = 1; i < arr.length - 1; i++) {
        var firstIndex = arr[i - 1].charCodeAt();
        var secondIndex = arr[i].charCodeAt();
        var thirdIndex = arr[i + 1].charCodeAt();
        thirdIndex - secondIndex == 1;
        secondIndex - firstIndex == 1;
        if (thirdIndex - secondIndex == 1 && secondIndex - firstIndex == 1) {
          flag = false;
        }
      }
      if (!flag) {
        $("#message_").text("您的工号为弱口令密码，请修改密码后登录！");
        return flag;
      }
      return flag;
    }
  }
};
</script>

<style lang="scss" scoped>
@import url(../assets/css/base.css);
.page-login {
  height: 100%;
  width: 100%;
  position: fixed;
  background: url(../assets/loginbg.png) no-repeat center center #01312b;
  .loginform {
    width: 399px;
    height: 396px;
    position: absolute;
    top: 50%;
    right: 95px;
    transform: translateY(-50%);
    padding: 89px 57px 0px 60px;
    background: url(../assets/loginformbg.png) no-repeat center center;
    .title {
      position: absolute;
      top: 21px;
      left: 50%;
      transform: translateX(-50%);
      color: rgba(255, 255, 255, 1);
      font-size: 16px;
    }
    .line {
      height: 40px;
      margin-bottom: 10px;
      input {
        height: 40px;
        outline: none;
        border: none;
        margin-left: 40px;
        padding-left: 20px;
        background: transparent;
        width: 240px;
      }
      &.desc {
        font-size: 12px;
        text-align: center;
        a {
          color: rgba(12, 112, 100, 1);
        }
      }
      &.checkbox {
        color: rgba(153, 153, 153, 1);
        line-height: 40px;
        input {
          width: auto;
          vertical-align: middle;
          margin-left: 0px;
        }
        a {
          float: right;
          color: rgba(153, 153, 153, 1);
        }
      }
      &.code {
        input {
          width: 150px;
        }
        a {
          display: inline-block;
          height: 40px;
          text-align: center;
          width: 87px;
          line-height: 40px;
          // background: #c00;
          vertical-align: top;
          margin-left: 5px;
        }
      }
    }
    .btn-login {
      text-align: center;
      display: block;
      line-height: 40px;
      width: 282px;
      height: 40px;
      background: rgba(12, 112, 100, 1);
      color: rgba(255, 255, 255, 1);
      font-size: 16px;
    }
  }
}
</style>
 
